<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <input id="txt" type="text">

  <script>
    // 防抖：当事件触发了，延时n秒后在来执行对应的回调函数，在这n秒内，如果事件又触发了，则需要重新计时（只会执行最后一次）

    // timerId 接受延时器的id
    let timerId

    document.querySelector('#txt').oninput = function () {
      // input 事件触发了就要获取输入框的内容
      // console.log(this.value)

      // 以下代码只是起到延时效果
      /* setTimeout(() => {
        console.log(this.value)
      }, 300) */


      // 先清除掉之前开的延时器
      clearTimeout(timerId)

      timerId = setTimeout(() => {
        console.log(this.value)
      }, 300)
      console.log(timerId)
    }
  </script>
</body>

</html>